<template>
<div>
			<!-- 头部 -->
		<div class="m-b-20 ovf-hd">
			<!-- 页面跳转 -->
			<div class="fl">
        <el-button type="primary" icon="document" @click="AddItems" >新增</el-button>
			</div>
			<!-- 导出Excel表格 -->
			<downExcel :baseApi="config.baseApi" :config="config.excel" :tableData="data.received.table" :conditions="data.exchanged.search"></downExcel>
			<div>
				<!-- 搜索 -->
				<search-model :config="config.search" :data="data"></search-model>
			</div>
		</div>
		<!-- 头部 -->

		<!-- 内容 -->
		<transition name="fade" mode="out-in" appear>
			<table-model v-loading="showLoading" :Edit="Edit" :tableData="data.received.table" :config="config.table" :exchanged="data.exchanged" :baseApi="config.baseApi"></table-model>
    </transition>
		<!-- 内容 -->

		<!-- 底部 -->
		<div class="pos-rel p-t-20">
			<!-- 批量操作 -->
			<btnGroup  v-if="!config.table.noGroup"  :selectedData="data.exchanged.multipleSelection" :baseApi="config.baseApi" :config="config.table.btnGroup" :exchanged="data.exchange"></btnGroup>
			<!-- 翻页操作 -->
			<page-model :data="data" :config="config.page" :dataCount="data.received.count" :limit="data.exchanged.search.limit" :currentPage="data.exchanged.search.page"></page-model>
		</div>
		 <!--底部 -->
        <!-- 新增 -->
    <el-dialog :title="Add.config.title" :visible.sync="Add.dialogFormVisible">
      <el-form ref="form" :model="Add.data.form" :rules="Add.config.rules" label-width="130px">
				
        <!-- 普通输入类型 -->
        <el-form-item :label="item.label" :prop="item.prop" v-for="item in Add.config.form.input">
          <el-input v-model.trim="Add.data.form[item.prop]" class="h-40 w-200" :maxlength="255" ></el-input>
        </el-form-item>

        <el-form-item :label="item.label" :prop="item.prop" v-for="item in Add.config.form.select">
          <el-select filterable v-model="Add.data.form[item.prop]" :placeholder="item.placeholder" class="w-200">
            <el-option v-for="option in Add.data.selectData[item.prop]" :label="option.label" :value="option.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item :label="item.label" :prop="item.prop" v-for="item in Add.config.form.multipleSelect">
          <el-select filterable v-model="Add.data.form[item.prop]" :placeholder="item.placeholder" class="w-200" multiple>
            <el-option v-for="option in Add.data.selectData[item.prop]" :label="option.label" :value="option.value"></el-option>
          </el-select>
        </el-form-item>

        <!-- 图片上传 -->
        <el-form-item :label="this.Add.config.form.uploadImg.label" v-if="this.Add.config.form.uploadImg.label">
          <el-upload
          class="avatar-uploader"
          :action = "Add.config.uploadUrl"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="Add.data.form[this.Add.config.form.uploadImg.prop]" :src="Add.config.domain + Add.data.form[this.Add.config.form.uploadImg.prop]" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <!-- 商品详情描述 -->
          <el-form-item label="商品详情">
          <quill-editor v-model="Add.data.form.MobbileDescription"
                ref="myQuillEditor"
                >
          </quill-editor>
        </el-form-item>  
        <!-- 商品详情描述 -->

			</el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="Add.dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="commitAdd">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 新增 -->
</div>
</template>

<script>
import http from 'assets/js/http.js'
import btnGroup from 'components/Common/btn-groupUp.vue'
import downExcel from 'components/Common/down-excel.vue'
import tableModel from 'components/Common/table-model-goods.vue'
import searchModel from 'components/Common/search-model.vue'
import pageModel from 'components/Common/page-model.vue'
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    quillEditor,
    btnGroup,
    downExcel,
    tableModel,
    searchModel,
    pageModel
  },
  data() {
    return {
      Add: {
        dialogFormVisible: false,
        data: {
          primary: '',
          form: {
            MarketPrice: null,
            CurrentPrice: null,
            Unit: null,
            ProductName: null,
            ProductCode: null,
            ShortDescription: null,
            Title: null,
            Description: null,
            MobbileDescription: null,
            ImgPath: null
          },
          selectData: { CategoryId: null, BrandId: null, SeriesId: null }
        },
        config: {
          uploadUrl: axios.defaults.baseURL + 'admin/upload',
          domain: axios.defaults.baseURL,
          title: '新增商品',
          form: {
            input: [
              { prop: 'MarketPrice', label: '市场价格' },
              { prop: 'CurrentPrice', label: '销售价格' },
              { prop: 'Unit', label: '计量单位' },
              { prop: 'ProductName', label: '商品名称' },
              { prop: 'ProductCode', label: '商品货号' },
              { prop: 'ShortDescription', label: '简短描述' },
              { prop: 'MobbileDescription', label: '移动端描述' },
              { prop: 'Title', label: '详情页标题' }
            ],
            select: [
              { prop: 'CategoryId', label: '商品类别' },
              { prop: 'BrandId', label: '商品品牌' }
            ],
            uploadImg: { prop: "ImgPath", label: "商品图标" }
          },
          rules: {
            Unit: [{ required: true, message: '请输入计量单位' }],
            ProductName: [{ required: true, message: '请输入商品名称' }],
            ProductCode: [{ required: true, message: '请输入商品货号' }],
            ShortDescription: [{ required: true, message: '请输入简短描述' }],
            MobbileDescription: [
              // { required: true, message: '请输入移动端描述' }
            ],
            Title: [{ required: true, message: '请输入详情页标题' }]
          }
        }
      },
      Edit: {
        dialogFormVisible: false,
        data: {
          primary: '',
          form: {
            MarketPrice: null,
            Unit: null,
            CurrentPrice: null,
            ProductName: null,
            ProductCode: null,
            ShortDescription: null,
            MobbileDescription: null,
            Title: null,
            Description: null,
            ImgPath: null
          },
          selectData: { CategoryId: null }
        },
        config: {
          uploadUrl: axios.defaults.baseURL + 'admin/upload',
          domain: axios.defaults.baseURL,
          title: '编辑商品',
          form: {
            input: [
              { prop: 'MarketPrice', label: '市场价格' },
              { prop: 'CurrentPrice', label: '销售价格' },
              { prop: 'Unit', label: '计量单位' },
              { prop: 'ProductName', label: '商品名称' },
              { prop: 'ProductCode', label: '商品货号' },
              { prop: 'ShortDescription', label: '简短描述' },
              // { prop: 'MobbileDescription', label: '移动端描述' },
              { prop: 'Title', label: '详情页标题' }
            ],
            select: [
              { prop: 'CategoryId', label: '商品类别' },
              { prop: 'BrandId', label: '商品品牌' }
            ],
            uploadImg: { prop: "ImgPath", label: "商品图标" }
          },
          rules: {
            Unit: [{ required: true, message: '请输入计量单位' }],
            ProductName: [{ required: true, message: '请输入商品名称' }],
            ProductCode: [{ required: true, message: '请输入商品货号' }],
            ShortDescription: [{ required: true, message: '请输入简短描述' }],
            MobbileDescription: [
              // { required: true, message: '请输入移动端描述' }
            ],
            Title: [{ required: true, message: '请输入详情页标题' }]
          }
        }
      },
      config: {
        baseApi: 'client/Products',
        excel: {
          fileName: '表格',
          tHeader: [
            '商品名称',
            '所属品牌',
            '所属类别',
            '访问量',
            '真实销售额',
            '显示销售额',
            '市场价格',
            '是否存在规格',
            '免邮',
            '上架日期',
            '修改日期',
            '计量单位',
            '货号',
            '简短描述',
            '移动端描述',
            '详细描述',
            '商品详情页标题'
          ],
          filterVal: [
            'ProductName',
            'BrandName',
            'CategoryName',
            'VisitiCounts',
            'SaleCounts',
            'ShowSaleCounts',
            'MarketPrice',
            'HasSKU',
            'IsfreeShippingTitle',
            'AddedDate',
            'UpdateDate',
            'Unit',
            'ProductCode',
            'ShortDescription',
            'MobbileDescription',
            'Description',
            'Title'
          ]
        },
        table: {
          btnGroup: [
            {
              title: '上架',
              loading: 'enableLoading',
              size: 'small',
              param: 1
            },
            {
              title: '下架',
              loading: 'disableLoading',
              size: 'small',
              param: 0
            }
          ],
          noGroup: false,
          checkbox: true,
          status: false,
          sort: { AddedDate: 'custom', UpdateDate: 'custom' },
          show: {
            items: ['商品名称', '所属品牌', '所属类别', '上架日期', '修改日期', '商品状态'],
            prop: [
              'ProductName',
              'BrandName',
              'CategoryName',
              'AddedDate',
              'UpdateDate',
              'OnSaleTitle'
            ],
            width: [150, 80, 80, 160, 160]
          },
          hidden: {
            items: [
              '访问量',
              '真实销售额',
              '显示销售额',
              '市场价格',
              '免邮'
            ],
            prop: [
              'VisitiCounts',
              'SaleCounts',
              'ShowSaleCounts',
              'MarketPrice',
              'IsfreeShipping'
            ]
          },
          operate: {
            del: false,
            edit: true,
            link: [
              {
                name: '商品属性列表',
                title: '商品属性',
                svg: true,
                class: 'attrs'
              },
              {
                name: '商品规格列表',
                title: '商品规格',
                svg: true,
                class: 'skus'
              },
              {
                name: '商品轮播列表',
                title: '商品轮播图',
                svg: true,
                class: 'carousel'
              }
            ]
          }
        },
        search: {
          search_input: [{ name: 'ProductName', placeholder: '商品名称' }],
          search_select: [
            { name: 'OnSale', placeholder: '商品状态' }
          ]
        },
        page: {
          limits: [5, 10, 20, 50, 100],
          layout: 'total, sizes, prev, pager, next, jumper'
        }
      },
      data: {
        received: {
          table: [],
          count: null,
          search: {
            OnSale: [
              { label: '在售', value: '1' },
              { label: '下架', value: '0' }
            ]
          }
        },
        exchanged: {
          search: { limit: 5, page: 1, orderByString: '' },
          multipleSelection: [],
          isDelete: 0
        }
      }
    }
  },
  created() {
    this.init()
    // 延迟绑定监听
    this.$watch('data.exchanged.search', {
      deep: true,
      handler: function() {
        router.push({ path: this.$route.path, query: this.getCondition() })
        _g.openGlobalLoading()
        this.tableData()
      }
    })
    this.$watch('data.exchanged.isDelete', {
      deep: true,
      handler: function() {
        _g.openGlobalLoading()
        this.tableData()
      }
    })
  },
  methods: {
    init() {
      // 基本数据获取
      this.tableData()
      this.getSelect()
      this.getCat()
      this.getBrand()
    },
    AddItems() {
      this.Add.dialogFormVisible = true // 显示窗体
    },
    getSelect() {
      // let url = 'blog/ArticleTypes'
      // this.apiGet(url).then(res => {
      //   this.handelResponse(res, data => {
      //     data.list.map(function(i) {
      //       i.value = i.id
      //       i.label = i.typeName
      //     })
      //     console.log('data.list', data.list)
      //     this.Edit.data.selectData.type = data.list
      //     this.Add.data.selectData.type = data.list
      //   })
      // })
    },
    getCat() {
      let url = 'client/Categories'
      this.apiGet(url).then(res => {
        this.handelResponse(res, data => {
          console.log(data)
          data.list.map(function(i) {
            i.value = i.Id
            i.label = i.CategoryName
          })
          console.log('data.list', data.list)
          this.Edit.data.selectData.CategoryId = data.list
          this.Add.data.selectData.CategoryId = data.list
        })
      })
    },
    getBrand() {
      let url = 'client/brands'
      this.apiGet(url).then(res => {
        this.handelResponse(res, data => {
          console.log(data)
          data.list.map(function(i) {
            i.value = i.Id
            i.label = i.BrandName
          })
          console.log('data.list', data.list)
          this.Edit.data.selectData.BrandId = data.list
          this.Add.data.selectData.BrandId = data.list
        })
      })
    },
    filter(data) {
      // 数据过滤
      data.map(function(i) {
        switch (i['SaleStatus']) {
          case 0:
            i['SaleStatusTitle'] = '删除'
            break
          case 1:
            i['SaleStatusTitle'] = '上架'
            break
          case 2:
            i['SaleStatusTitle'] = '下架'
            break
        }
        switch (i['IsfreeShipping']) {
          case 0:
            i['IsfreeShippingTitle'] = '否'
            break
          case 1:
            i['IsfreeShippingTitle'] = '是'
            break
        }

        switch (i['OnSale']) {
          case 0:
            i['OnSaleTitle'] = '下架'
            break
          case 1:
            i['OnSaleTitle'] = '在售'
            break
        }
      })

      return data
    },
    tableData() {
      // 表格数据
      const data = {
        params: this.getCondition()
      }
      // 请求地址
      let url = this.config.baseApi
      this.apiGet(url, data).then(res => {
        this.handelResponse(res, data => {
          this.data.received.table = this.filter(data.list)
          this.data.received.count = data.dataCount
          _g.closeGlobalLoading()
        })
      })
    },
    getCondition() {
      // 搜索优化配置
      let temp = this.data.exchanged.search
      let params = {}
      for (let key in temp) {
        if (temp[key]) {
          params[key] = temp[key]
        }
      }
      return params
    },
    commitAdd() {
      console.log(this.Add.data.form)
      this.$refs.form.validate(pass => {
        if (pass) {
          // 提交数据
          this.apiPost(this.config.baseApi, this.Add.data.form).then(res => {
            this.handelResponse(
              res,
              data => {
                _g.toastMsg('success', res.data)
                this.data.exchanged.isDelete++
                this.Add.dialogFormVisible = false // 显示窗体
              },
              () => {
                this.isLoading = !this.isLoading
              }
            )
          })
        }
      })
    },
    handleAvatarSuccess(res, file) {
      this.Add.data.form[this.Add.config.form.uploadImg.prop] = res.data
      // this.imageUrl =
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isLt2M
    }
  },
  mixins: [http]
}
</script>

<style scoped>
.el-input,
.el-input__inner {
  width: auto;
}
</style>
